<template>
  <div class="scroll-container">
    <div class="header">header</div>
    <div class="scroll-list-wrap">
      <scroll
        ref="scroll"
        :data="items"
        :options="options"
        @pulling-down="onPullingDown"
        @pulling-up="onPullingUp"
        @click="clickItem">
      </scroll>
    </div>
    <div class="footer">footer</div>
  </div>
</template>

<script>
    import Vue from 'vue'
    import scroll from '../Scroll/Scroll'
    export default {
        name: "VerticalScroll",
        components: {scroll},
        computed: {
          options() {
            return {
              pullDownRefresh: this.pullDownRefreshObj,
              pullUpLoad: this.pullUpLoadObj,
              scrollbar: false
            }
          },
          pullDownRefreshObj: function() {
            return this.pullDownRefresh ? {
              threshold: parseInt(this.pullDownRefreshThreshold),
              // Do not need to set stop value, but you can if you want
              stop: parseInt(this.pullDownRefreshStop),
              txt: this.pullDownRefreshTxt
            } : false
          },
          pullUpLoadObj: function() {
            return this.pullUpLoad ? {
              threshold: parseInt(this.pullUpLoadThreshold),
              txt: {
                more: this.pullUpLoadMoreTxt,
                noMore: this.pullUpLoadNoMoreTxt
              }
            } : false
          }
        },
        methods: {
          onPullingDown() {
            // 模拟更新数据
            setTimeout(() => {
              if (Math.random() > 0.5) {
                // 如果有新数据
                this.items.unshift('我是第0行')
              } else {
                // 如果没有新数据
                this.$refs.scroll.forceUpdate()
              }
            }, 2000)
          },
          onPullingUp() {
            // 更新数据
            setTimeout(() => {
              if (Math.random() > 0.5) {
                // 如果有新数据
                let newPage = []
                for (let i = 0; i < 10; i++) {
                  newPage.push('我是第' + i + '行')
                }
                this.items = this.items.concat(newPage)
              } else {
                // 如果没有新数据
                this.$refs.scroll.forceUpdate()
              }
            }, 1500)
          },
          /*rebuildScroll() {
            Vue.nextTick(() => {
              this.$refs.scroll.destroy()
              this.$refs.scroll.initScroll()
            })
          },*/
          clickItem (item) {
            console.log(item)
          }
        },
        data () {
          return {
            items: [
              '我是第一行',
              '我是第二行',
              '我是第三行',
              '我是第四行',
              '我是第五行',
              '我是第六行',
              '我是第七行',
              '我是第八行'
            ],
            pullDownRefresh: true,
            pullDownRefreshThreshold: 60,
            pullDownRefreshStop: 40,
            pullDownRefreshTxt: '刷新成功',
            pullUpLoad: true,
            pullUpLoadThreshold: 0,
            pullUpLoadMoreTxt: '加载更多',
            pullUpLoadNoMoreTxt: '我也是有底线的',
            customPullDown: false
          }
        }
    }
</script>

<style scoped>
  .header{
    height:100px;
    background-color: #cccccc;
    text-align: center;
  }
  .scroll-list-wrap{
    /*width: 80%;*/
    /*margin-left: 10%;*/
    /*height: 350px;*/
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    transform: rotate(0deg);
    overflow: hidden;
    position: fixed;
    top:100px;
    bottom: 50px;
    left: 10%;
    right: 10%;
  }
  .footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #cccccc;
    text-align: center;
    height: 50px;
  }
</style>
